<template>
  <view class="release-start-container">
    <!-- 自定义导航栏 -->
    <navigation-bar>
      <navigator
        style="position: absolute;top: 50%;transform: translateY(-50%);left: 20px;font-size: 16px;line-height: 16px;color: #000;"
        class="iconfont" hover-class="none" open-type="navigateBack">&#xe61a;</navigator>
      <view class="top-title-bar" v-if="releaseType !== '闲置'">
        发布{{releaseType}}
      </view>
      <view class="top-title-bar" v-else>
        {{subReleaseType === '精确' ? '精确闲置' : '快速发布'}}
      </view>
    </navigation-bar>
    <view class="main-content-wrapper" v-if="subReleaseType !== '快速'">
      <view class="release-txt-content">
        <textarea class="inner-txt" :placeholder="placeholderText[releaseIndex]" auto-height maxlength="300"
          placeholder-style="font-size: 32rpx;line-height: 1.25;opacity: 0.5;" :show-confirm-bar="false"
          :cursor-spacing="30" v-model="content"></textarea>
      </view>
      <view class="release-img-content">
        <view class="img-title">
          添加照片
        </view>
        <view class="img-upload-grid">
          <view class="img-item" v-for="(item, index) in imgList" :key="item">
            <view class="img-item_selecton"></view>
            <view class="img-item_self" @click="onPreviewImg(index)">
              <image class="img" :src="item" mode="aspectFill"></image>
            </view>
            <view class="remove-btn" @click="onClickRemove(index)">
              ×
            </view>
          </view>
          <view class="img-item item-upload" v-if="imgList.length < 6">
            <view class="img-item_selecton"></view>
            <view class="img-item_self" @click="onUploadImg">
              <view class="upd">
                +
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 添加联系方式 -->
      <view class="release-contact-content">
        <view class="add-contact-hd">
          <view class="left-title">
            添加联系方式
          </view>
          <view class="unfold-checkbox" v-if="isShowContact">
            <view class="name">
              已有联系方式
            </view>
            <view class="checkbox" :style="{'background-color': hasContactInfo ? '#000' : '#FFF'}">
              {{hasContactInfo ? '√' : ''}}
            </view>
          </view>
          <view class="right-fold iconfont" @click="isShowContact = true" v-else>
            &#xe627;
          </view>
        </view>
        <view class="add-contact-bd" v-if="isShowContact" @click="hasContactInfo = true">
          <view class="left-avatar">
            <image class="avatar-pic" src="@/static/avatar.png" mode="aspectFill"></image>
          </view>
          <view class="contact-info">
            <view class="has-info" v-if="hasContactInfo">
              <view class="name_phone">
                <text style="margin-right: 24rpx;">一二</text><text>12345678911</text>
              </view>
              <view class="address">
                <text style="margin-right: 24rpx;">地址</text><text>长春理工大学西校区8舍101号</text>
              </view>
            </view>
            <view class="no-info" style="text-align: center;" v-else>
              暂无数据
            </view>
          </view>
          <view class="right-add-arrow iconfont">
            &#xe624;
          </view>
        </view>
      </view>
      <view class="release-publish-content" v-if="releaseType === '求助'">
        <view class="publish-hd">
          <view class="left-title">
            投稿发布
          </view>
          <view class="unfold-checkbox" v-if="isShowPublish">
            <view class="checkbox" :style="{'background-color': isShowPublish ? '#000' : '#FFF'}">
              {{isShowPublish ? '√' : ''}}
            </view>
          </view>
          <view class="right-fold iconfont" @click="isShowPublish = true" v-else>
            &#xe627;
          </view>
        </view>
        <view class="publish-bd" v-if="isShowPublish">
          <view class="tag-list">
            <view class="tag-item" :style="{color: item.selected ? '#000' : '#00000080'}"
              v-for="(item,index) in tagList" :key="item.id" @click="onClickTag(index)">
              {{item.tag}}
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 展示快速发布 -->
    <block v-else>
      <convenient-release ref="fastRelease"></convenient-release>
    </block>
    <view class="bottom-submit-btn" @click="onConfirmRelease">
      发布
    </view>
  </view>
</template>

<script>
  import convenientRelease from "./components/convenient-release/convenient-release.vue"
  export default {
    data() {
      return {
        releaseType: '', // 闲置 求购 求助 帖子
        subReleaseType: '', // 精确 快速
        releaseIndex: 0,
        isShowContact: false,
        isShowPublish: false,
        hasContactInfo: false,
        mapReleaseType: ['闲置', '求购', '求助', '帖子'],
        placeholderText: [
          '写一条详情描述，让别人对您的宝贝更加地了解。',
          '写一条详情描述，让别人对您的求购更加地了解。',
          '写一条详情描述，让别人对您的求助更加地了解。',
          '闲来无事？分享一条您最近的趣事！'
        ],
        content: '',
        imgList: ['/static/post-cover1.png'],
        tagList: [{
            id: 1,
            tag: '标签1'
          },
          {
            id: 2,
            tag: '标签2'
          },
          {
            id: 3,
            tag: '标签3'
          },
          {
            id: 4,
            tag: '标签4'
          },
          {
            id: 5,
            tag: '标签5'
          },
          {
            id: 6,
            tag: '标签6'
          },
          {
            id: 7,
            tag: '标签7'
          },
          {
            id: 8,
            tag: '标签8'
          },
          {
            id: 9,
            tag: '标签9'
          },
        ]
      };
    },
    onLoad(options) {
      this.releaseType = options.releaseType || ''
      this.mapReleaseType.forEach((item, index) => {
        if (item === this.releaseType) {
          this.releaseIndex = index
        }
      })

      if (this.releaseType === '闲置') {
        this.subReleaseType = options.subReleaseType
      }

      this.tagList.map(x => x.selected = false)
    },
    methods: {
      // 预览图片
      onPreviewImg: function(current) {
        uni.previewImage({
          current: current,
          urls: this.imgList
        })
      },
      // 上传图片
      onUploadImg: function() {
        uni.chooseMedia({
          count: 6 - this.imgList.length,
          mediaType: ['image'],
          success: ({
            tempFiles
          }) => {
            this.imgList.push(...tempFiles.map(x => x.tempFilePath))
          }
        })
      },
      // 点击叉号删除图片
      onClickRemove: function(index) {
        this.imgList.splice(index, 1)
        this.imgList = [...this.imgList]
      },
      // 点击 tag
      onClickTag: function(index) {
        this.tagList[index].selected = !this.tagList[index].selected
        this.$set(this.tagList, index, this.tagList[index])
      },

      // 确认发布
      onConfirmRelease: function() {
        let data
        if (this.subReleaseType === '快速') {
          data = this.$refs.fastRelease.packData()
          const finish = data.some(x => x.content !== '' && x.avatar !== '' && x.name !== '' && x.address !== '' && x
            .phone !== '')
          if (finish) {
            uni.navigateBack({
              delta: getCurrentPages().length - 1,
              success: () => {
                uni.$emit('submitReleaseInfo', true)
              }
            })
          } else {
            uni.showToast({
              icon: 'none',
              title: '请将内容和联系方式填写完整'
            })
          }
        } else if (this.releaseType === '闲置' || this.releaseType === '求购' || this.releaseType === '帖子') {
          data = {
            postType: this.releaseType,
            content: this.content,
            imgList: this.imgList,
            avatar: this.hasContactInfo ? '/static/avatar.png' : '',
            name: this.hasContactInfo ? '一二' : '',
            address: this.hasContactInfo ? '长春理工大学西校区8舍101号' : '',
            phone: this.hasContactInfo ? '12345678911' : ''
          }
          const finish = data.content !== '' &&
            data.avatar !== '' && data.name !== '' && data.address !== '' && data.phone !== ''
          if (finish) {
            uni.navigateBack({
              delta: getCurrentPages().length - 1,
              success: () => {
                uni.$emit('submitReleaseInfo', true)
              }
            })
          } else {
            uni.showToast({
              icon: 'none',
              title: '请将内容和联系方式填写完整'
            })
          }
        } else if (this.releaseType === '求助') {
          data = {
            postType: this.releaseType,
            content: this.content,
            imgList: this.imgList,
            avatar: this.hasContactInfo ? '/static/avatar.png' : '',
            name: this.hasContactInfo ? '一二' : '',
            address: this.hasContactInfo ? '长春理工大学西校区8舍101号' : '',
            phone: this.hasContactInfo ? '12345678911' : '',
            tagList: this.tagList.filter(x => x.selected)
          }
          const finish = data.content !== '' &&
            data.avatar !== '' && data.name !== '' && data.address !== '' && data.phone !== '' && data.tagList
            .length !== 0
          if (finish) {
            uni.navigateBack({
              delta: getCurrentPages().length - 1,
              success: () => {
                uni.$emit('submitReleaseInfo', true)
              }
            })
          } else {
            uni.showToast({
              icon: 'none',
              title: '请将内容和联系方式填写完整'
            })
          }
        }
      }
    },
    components: {
      convenientRelease
    }
  }
</script>

<style lang="scss">
  .release-start-container {
    box-sizing: border-box;
    min-height: 100%;
    padding-bottom: 280rpx;

    .main-content-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;

      .release-txt-content {
        margin-top: 40rpx;
        width: 88.37%;

        .inner-txt {
          width: 100%;
          height: 300rpx !important;
          font-size: 32rpx;
          line-height: 1.25;
        }
      }

      .release-img-content {
        margin-top: 20rpx;
        width: 88.37%;

        .img-title {
          font-size: 32rpx;
        }

        .img-upload-grid {
          margin-top: 20rpx;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 8rpx;

          .img-item {
            position: relative;

            .img-item_selecton {
              width: 100%;
              padding-top: 100%;
            }

            .img-item_self {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              border-radius: 12rpx;
              overflow: hidden;

              .img {
                width: 100%;
                height: 100%;
              }
            }

            .remove-btn {
              position: absolute;
              top: -8rpx;
              right: -8rpx;
              width: 24rpx;
              height: 24rpx;
              border-radius: 15rpx;
              background-color: #C4C4C4;
              text-align: center;
              line-height: 22rpx;
              font-size: 20rpx;
              z-index: 1;
              overflow: hidden;
            }
          }

          .item-upload {

            .img-item_self {
              display: flex;
              justify-content: center;
              align-items: center;
              background-color: #F0F0F0;

              .upd {
                font-size: 72rpx;
              }
            }
          }
        }
      }

      .release-contact-content,
      .release-publish-content {
        margin-top: 20rpx;
        width: 88.37%;

        .add-contact-hd,
        .publish-hd {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .left-title {
            font-size: 32rpx
          }

          .right-fold {
            font-size: 40rpx;
            line-height: 40rpx;
          }

          .unfold-checkbox {
            display: flex;
            align-items: center;

            .name {
              margin-right: 30rpx;
              font-size: 32rpx;
            }

            .checkbox {
              box-sizing: border-box;
              width: 35rpx;
              height: 35rpx;
              border-radius: 20rpx;
              border: #000 3rpx solid;
              background-color: #000;
              color: #FFF;
              text-align: center;
              line-height: 35rpx;
              transition: all 0.3s ease;
            }
          }
        }

        .add-contact-bd {
          margin-top: 20rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .left-avatar {
            .avatar-pic {
              width: 120rpx;
              height: 120rpx;
              border-radius: 80rpx;
              overflow: hidden;
            }
          }

          .contact-info {
            width: 70%;
            margin: 0 20rpx;
            font-size: 24rpx;

            .name_phone {
              margin-bottom: 30rpx;
            }

            .address,
            .name_phone {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }

          .right-add-arrow {
            font-size: 40rpx;
            line-height: 40rpx;
          }
        }
      }

      .release-publish-content {
        .publish-hd {
          margin-top: 40rpx;
        }

        .publish-bd {
          margin-top: 20rpx;

          .tag-list {
            display: flex;
            flex-wrap: wrap;

            .tag-item {
              margin-right: 20rpx;
              margin-bottom: 20rpx;
              font-size: 28rpx;
              color: #00000080;
              transition: all 0.3s ease;
            }
          }
        }
      }
    }

    .bottom-submit-btn {
      position: fixed;
      bottom: 120rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 83.72%;
      height: 70rpx;
      background-color: #000;
      border-radius: 50rpx;
      color: #FFF;
      font-size: 40rpx;
      text-align: center;
      line-height: 70rpx;
      z-index: 99;
    }
  }
</style>